<template>
  <div class="about">
    <div class="line"></div>
    <el-menu
      :default-active="activePath"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#072A40"
      text-color="#FFFFFF"
      active-text-color="#8CA9D3">
      <button index="1"
              style="width: 110px;position: absolute;margin-top: 10px;
              background-color: #072A40;height:40px;
              color: rgb(255,255,255,0.85);border: none">
        <i class="el-icon-back" style="font-size: 16px">工作台</i>
      </button>
      <span style="position:absolute;left:20%;top:20px;color:rgb(255,255,255,0.85)">
        <i class="el-icon-s-custom" style="font-size: 16px">&nbsp;{{ name }}</i>
      </span>
      <span style="position: absolute;right: 3%;top:10px">
        <el-avatar :size="40" :src="circleUrl"></el-avatar>
      </span>
      <el-menu-item index="5" style="margin-left: 38%;width:90px">
        <i class="el-icon-document" style="font-size: 18px">文档</i>
      </el-menu-item>
      <el-menu-item index="6" style="width: 110px;">
        <i class="el-icon-edit" style="font-size: 18px">原型稿</i>
      </el-menu-item>
      <el-menu-item index="7" style="width: 90px;">
        <i class="el-icon-data-line" style="font-size: 18px">制图</i>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {},
  computed:{
    activePath(){
        return '/program/design';
    }
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      name:"项目名称"
    }
  }
}
</script>
